<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <!-- 基础信息 -->
      <el-form-item label="用户唯一标识" prop="userId">
        <el-input v-model="formData.userId" placeholder="请输入用户唯一标识" disabled />
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCardNumber">
        <el-input v-model="formData.idCardNumber" placeholder="请输入身份证号码" disabled />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入姓名" disabled />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="formData.age" placeholder="请输入年龄" disabled />
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input v-model="formData.phoneNumber" placeholder="请输入手机号码" disabled />
      </el-form-item>

      <!-- 图片上传组件 -->
      <el-form-item label="身份证正面照片" prop="idCardFrontImage">
        <UploadImg v-model="formData.idCardFrontImage" :disabled="true" /> <!-- 假设 UploadImg 支持 disabled 属性 -->
      </el-form-item>
      <el-form-item label="身份证反面照片" prop="idCardBackImage">
        <UploadImg v-model="formData.idCardBackImage" :disabled="true" /> <!-- 假设 UploadImg 支持 disabled 属性 -->
      </el-form-item>
      <el-form-item label="面部照片" prop="faceImage">
        <UploadImg v-model="formData.faceImage" :disabled="true" /> <!-- 假设 UploadImg 支持 disabled 属性 -->
      </el-form-item>

      <!-- 工作信息 -->
      <el-form-item label="工作单位名称" prop="companyName">
        <el-input v-model="formData.companyName" placeholder="请输入工作单位名称" disabled />
      </el-form-item>
      <el-form-item label="工作地址" prop="companyAddress">
        <el-input v-model="formData.companyAddress" placeholder="请输入工作地址" disabled />
      </el-form-item>
      <el-form-item label="职位" prop="position">
        <el-input v-model="formData.position" placeholder="请输入职位" disabled />
      </el-form-item>
      <el-form-item label="年收入" prop="annualIncome">
        <el-input v-model="formData.annualIncome" placeholder="请输入年收入" disabled />
      </el-form-item>

      <!-- 下拉选择框 -->
      <el-form-item label="婚姻状况" prop="maritalStatus">
        <el-select v-model="formData.maritalStatus" placeholder="请选择婚姻状况" disabled>
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.MARRY_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学历" prop="education">
        <el-select v-model="formData.education" placeholder="请选择学历" disabled>
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.EDUCATIONAL_BACKGROUND)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <!-- 紧急联系人 -->
      <el-form-item label="紧急联系人1姓名" prop="contact1Name">
        <el-input v-model="formData.contact1Name" placeholder="请输入紧急联系人1姓名" disabled />
      </el-form-item>
      <el-form-item label="紧急联系人1电话" prop="contact1Phone">
        <el-input v-model="formData.contact1Phone" placeholder="请输入紧急联系人1电话" disabled />
      </el-form-item>
      <el-form-item label="紧急联系人1关系" prop="contact1Relationship">
        <el-select v-model="formData.contact1Relationship" placeholder="请选择紧急联系人1关系" disabled>
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.EMERGENCY_CONTACT_RELATIONSHIP)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <!-- 紧急联系人2 同理，全部添加 disabled -->
      <el-form-item label="紧急联系人2姓名" prop="contact2Name">
        <el-input v-model="formData.contact2Name" placeholder="请输入紧急联系人2姓名" disabled />
      </el-form-item>
      <el-form-item label="紧急联系人2电话" prop="contact2Phone">
        <el-input v-model="formData.contact2Phone" placeholder="请输入紧急联系人2电话" disabled />
      </el-form-item>
      <el-form-item label="紧急联系人2关系" prop="contact2Relationship">
        <el-select v-model="formData.contact2Relationship" placeholder="请选择紧急联系人2关系" disabled>
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.EMERGENCY_CONTACT_RELATIONSHIP)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <!-- 日期选择器 -->
      <el-form-item label="申请时间" prop="applicationTime">
        <el-date-picker
          v-model="formData.applicationTime"
          type="date"
          value-format="x"
          placeholder="选择申请时间"
          disabled  
        />
      </el-form-item>

      <!-- 其他表单元素（单选框、文本域等） -->
      <el-form-item label="申请状态" prop="status">
        <el-select v-model="formData.status" placeholder="请选择申请状态" disabled> <!-- 修正 prop 为 status，新增 disabled -->
          <el-option
            v-for="dict in getStrDictOptions(DICT_TYPE.APPLY_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否缴纳公积金" prop="isHousingFund">
        <el-radio-group v-model="formData.isHousingFund" disabled>
          <el-radio
            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 其他单选框组件同理，添加 disabled 到 el-radio-group -->
      <el-form-item label="是否有房产" prop="hasProperty">
        <el-radio-group v-model="formData.hasProperty" disabled>
          <el-radio
            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
            :key="dict.value"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="官司描述" prop="lawsuitDescription">
        <Editor v-model="formData.lawsuitDescription" height="150px" :disabled="true" /> 
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取 消</el-button>
      <!-- 移除提交按钮，避免误操作 -->
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
import { CreditApplicationApi} from '@/api/system/creditapplication'

/** 授信信息 表单 */
defineOptions({ name: 'CreditApplicationForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  userId: undefined,
  idCardNumber: undefined,
  name: undefined,
  age: undefined,
  phoneNumber: undefined,
  idCardFrontImage: undefined,
  idCardBackImage: undefined,
  faceImage: undefined,
  companyName: undefined,
  companyAddress: undefined,
  position: undefined,
  annualIncome: undefined,
  maritalStatus: undefined,
  education: undefined,
  contact1Name: undefined,
  contact1Phone: undefined,
  contact1Relationship: undefined,
  contact2Name: undefined,
  contact2Phone: undefined,
  contact2Relationship: undefined,
  applicationTime: undefined,
  status: undefined,
  isHousingFund: undefined,
  isSocialInsurancePaid: undefined,
  salaryBank: undefined,
  businessLicense: undefined,
  hasBusinessLicense: undefined,
  hasBankFlow: undefined,
  isRealOperation: undefined,
  hasProperty: undefined,
  propertyAddress: undefined,
  propertyType: undefined,
  propertyValue: undefined,
  hasDebt: undefined,
  debtAmount: undefined,
  debtType: undefined,
  hasOverdue: undefined,
  overdueDays: undefined,
  monthlyRepayment: undefined,
  hasLawsuit: undefined,
  lawsuitDescription: undefined,
})
const formRules = reactive({
  idCardNumber: [{ required: true, message: '身份证号码不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  phoneNumber: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }],
  idCardFrontImage: [{ required: true, message: '身份证正面照片不能为空', trigger: 'blur' }],
  idCardBackImage: [{ required: true, message: '身份证反面照片不能为空', trigger: 'blur' }],
  faceImage: [{ required: true, message: '面部照片不能为空', trigger: 'blur' }],
  companyName: [{ required: true, message: '工作单位名称不能为空', trigger: 'blur' }],
  companyAddress: [{ required: true, message: '工作地址不能为空', trigger: 'blur' }],
  position: [{ required: true, message: '职位不能为空', trigger: 'blur' }],
  annualIncome: [{ required: true, message: '年收入不能为空', trigger: 'blur' }],
  maritalStatus: [{ required: true, message: '婚姻状况不能为空', trigger: 'change' }],
  education: [{ required: true, message: '学历不能为空', trigger: 'change' }],
  contact1Name: [{ required: true, message: '紧急联系人1姓名不能为空', trigger: 'blur' }],
  contact1Phone: [{ required: true, message: '紧急联系人1电话不能为空', trigger: 'blur' }],
  contact1Relationship: [{ required: true, message: '紧急联系人1关系不能为空', trigger: 'change' }],
  contact2Name: [{ required: true, message: '紧急联系人2姓名不能为空', trigger: 'blur' }],
  contact2Phone: [{ required: true, message: '紧急联系人2电话不能为空', trigger: 'blur' }],
  contact2Relationship: [{ required: true, message: '紧急联系人2关系不能为空', trigger: 'change' }],
})
const formRef = ref() // 表单 Ref


/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  // 修改时，设置数据
  console.log(id)
  if (id) {
    formLoading.value = true
    try {
    let data =  await CreditApplicationApi.getCreditApplicationByUserId(id)
      if (data === null){
        console.log("data is null")
        message.notifyWarning("该会员暂无授信数据")
      }else {
        dialogVisible.value = true
        dialogTitle.value = t('action.' + type)
        formType.value = type
        formData.value = data
      }
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const handleCancel = () => {
  dialogVisible.value = false; // 显式修改响应式变量
};
</script>
